<template>
  <div>
      <ul>
          <li v-for="(v,i) in arr" :key="i">
              <img :src="v.img">
              <span>{{v.price}}</span>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[{img:"/img/5.gif",price:"$95"},
            {img:"/img/6.gif",price:"$8"},
            {img:"/img/7.gif",price:"$48.8"},
            {img:"/img/8.gif",price:"$6.8"},
            {img:"/img/1.gif",price:"$21.98"},
            {img:"/img/2.gif",price:"$8.98"},
            {img:"/img/3.gif",price:"$0.1"},
            {img:"/img/4.gif",price:"$13.68"},
            ]
        }
    }
}
</script>

<style scoped>
    ul{
        display: flex;
        overflow: scroll;
        width: 3.28rem;
    }
    li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#d11e12;
    }
</style>